<template>
  <el-dialog
    width="50%"
    :title="title"
    :visible.sync="innerVisible"
    append-to-body
    :before-close="handleClose"
  >
    <div class="title">
      <p>当前选择商品：{{ treeData.name }}</p>
      <el-button @click="addGood">新增规格列表</el-button>
      <hr />
      <el-form :model="goodsForm" ref="goodsForm " label-width="100px">
        <el-form-item
          v-for="(good, index) in goodsForm.goods"
          :label="good.title + index"
          :key="good.key"
          :prop="good.title"
        >
          <div class="item">
            <el-input v-model="good.title"></el-input>
            <el-button @click.prevent="addChildGood(index)">增加子组</el-button>
            <el-button @click.prevent="removeGood(index)">删除组</el-button>
          </div>
          <!-- 内层  -- el-form-item -->
          <el-form-item
            v-for="(item, i) in good.children"
            :label="item.title + i"
            :key="item.key"
            :prop="item.title"
          >
            <div class="item">
              <el-input v-model="item.title"></el-input>
              <el-button @click.prevent="removeItem(index, i)">删除</el-button>
            </div>
          </el-form-item>
          <!-- /内层  -- el-form-item -->
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('goodsForm ')">
          提交
        </el-button>
        <el-button @click="resetForm('goodsForm ')"> 重置 </el-button>
      </span>
    </div>
  </el-dialog>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      innerVisible: false,
      treeData: {},
      goodsForm: {
        // 表单信息
        goods: [],
      },
    };
  },
  computed: {
    ...mapState("specModule", ["title", "changeSpec"]),
  },

  watch: {
    changeSpec(val) {
      this.treeData.name = val.specsName;
      if (val.paramData !== undefined) {
        this.goodsForm.goods = JSON.parse(val.paramData);
      }
    },
  },

  methods: {
    ...mapMutations("specModule", ["setSpec"]),
    // 添加子组件
    addChildGood(index) {
      this.goodsForm.goods[index].children.push({
        value: "",
        title: "",
      });
    },

    // 提交按钮
    submitForm(formName) {
      if (this.title === "添加规格") {
        this.$api
          .insertItemParam({
            itemCatId: this.treeData.cid,
            content: JSON.stringify(this.goodsForm.goods),
            specsName: this.treeData.name,
          })
          .then((res) => {
            if (res.status === 200) {
              this.$parent.dialogVisible = false;
              this.handleClose();
              this.$notify({
                title: "成功",
                message: "数据添加成功",
                type: "success",
              });
            } else {
              this.$notify.error({
                title: "错误",
                message: "添加失败了",
              });
            }
          });
      } else {
        // 修改商品
        this.$api
          .updateCategory({
            cid: this.changeSpec.itemCatId,
            content: JSON.stringify(this.goodsForm.goods),
            id: this.changeSpec.id,
            specsName: this.changeSpec.specsName,
          })
          .then((res) => {
            this.handleClose();
            if (res.status === 200) {
              this.$notify({
                title: "成功",
                message: "数据修改成功",
                type: "success",
              });
            } else {
              this.$notify.error({
                title: "错误",
                message: "放弃更改",
              });
            }
          });
      }
    },
    //  清空数据 -- 关闭弹窗
    handleClose() {
      // 1. 隐藏弹框
      this.innerVisible = false;
      // 2. 清空数据
      this.resetForm();
      // 3. 视图更新
      this.$parent.$parent.http(1);
    },

    // 重置按钮
    resetForm() {
      this.goodsForm.goods = [];
    },
    // 删除组------
    removeGood(index) {
      this.goodsForm.goods.splice(index, 1);
    },
    // 删除子组件
    removeItem(index, i) {
      console.log(index, i);
      this.goodsForm.goods[index].children.splice(i, 1);
    },
    // 新增列表参数 ----
    addGood() {
      this.goodsForm.goods.push({
        value: "",
        title: "",
        children: [],
        key: Date.now(),
      });
    },
  },
};
</script>

<style lang="less" scoped>
hr {
  margin: 10px 0;
}
.item {
  display: flex;
  margin-top: 10px;
  button {
    margin-left: 10px;
  }
}
</style>